<template>
  <div class="container">
    <!-- 首页载入动画 -->
    <transition name="loading_transition">
      <div v-if="animatino_show" class="loading_animation">
        <div class="container_inner">
          <el-image :src="loading_img" class="wave"></el-image>

          <!-- <i class="iconfont icon-baozi"></i> -->
        </div>
      </div>
    </transition>
    <!-- /首页载入动画 -->

    <transition name="ceiling_transition">
      <div v-if="show" id="#top" class="nav">
        <div class="inner">
          <!-- 品牌Logo -->
          <el-image
            ref="logo_url"
            fit="cover"
            :src="logo_url"
            alt="返回首页"
          ></el-image>
          <a class="a_to_home" href="javascript:;" @click="to_home"></a>

          <!-- /品牌Logo -->

          <!-- 导航按钮 -->
          <div class="a_button">
            <a
              v-for="item in nav_options"
              :key="item.key"
              @click="item.methods"
              >{{ item.content }}</a
            >
          </div>
          <!-- /导航按钮 -->

          <!-- 咨询热线 -->
          <div class="hot_line">
            <p class="p1">全国咨询热线</p>
            <p class="p2">400-168-8810</p>
          </div>
          <!-- /咨询热线 -->
        </div>
      </div>
    </transition>
    <transition name="ceiling_transition">
      <div ref="top" v-if="!show && sub_show" id="#top" class="nav nav_ceiling">
        <div class="inner">
          <!-- 品牌Logo -->
          <el-image
            ref="logo_url"
            fit="cover"
            :src="logo_ceiling_url"
          ></el-image>
          <a
            class="a_to_home"
            href="javascript:void(false)"
            @click="to_home"
          ></a>

          <!-- /品牌Logo -->

          <!-- 导航按钮 -->
          <div class="a_button">
            <a
              v-for="item in nav_options"
              :key="item.key"
              @click="item.methods"
              >{{ item.content }}</a
            >
          </div>
          <!-- /导航按钮 -->

          <!-- 咨询热线 -->
          <div class="hot_line">
            <p class="p1">全国咨询热线</p>
            <p class="p2">400-168-8810</p>
          </div>
          <!-- /咨询热线 -->
        </div>
      </div>
    </transition>

    <!-- 子组件 -->
    <transition :name="direction">
      <router-view class="appView"></router-view>
    </transition>

    <!-- 联系我们 -->
    <section class="contact_us">
      <p class="p1">联系我们</p>
      <p class="p2">
        想要了解加盟吗？您可以填写下方的表格，我们将尽快与您取得联系
      </p>
      <div class="contact_info">
        <el-image fit="cover" :src="customer_service_pic"></el-image>
        <div class="info">
          <p class="info_p1">HI,ARE YOU READY?</p>
          <p class="info_p2">你准备好了吗？那就赶紧与我们联系吧！</p>
          <el-form ref="form" :model="form">
            <div class="info01">
              <div>
                <span>姓名：</span>
                <input
                  prop="name"
                  v-model="form.name"
                  maxlength="10"
                  type="text"
                />
              </div>
              <div>
                <span>电话：</span>
                <input
                  prop="tel"
                  v-model="form.tel"
                  maxlength="20"
                  type="tel"
                />
              </div>
              <div>
                <span>邮箱：</span>
                <input
                  prop="mail"
                  v-model="form.mail"
                  maxlength="25"
                  type="email"
                />
              </div>
            </div>
            <div class="info02">
              <div>
                <span>留言：</span>
                <input
                  prop="content"
                  v-model="form.content"
                  maxlength="40"
                  type="text"
                />
              </div>
            </div>
          </el-form>
          <div @click="_upload" class="upload">提交留言</div>
          <p class="statement">
            我们将尊重您的隐私，不容忍垃圾邮件，绝不会将您的信息出售，出租，租赁或透露给任何第三方。
          </p>
        </div>
        <a
          id="back_to_top"
          class="back_to_top"
          @click="to_top('back_to_top')"
        ></a>
      </div>
    </section>
    <footer class="footer">
      <div class="line01">
        <div class="logo">
          <el-image fit="cover" :src="logo_url_transparent"></el-image>
        </div>
        <div class="contact">
          <p>
            电话：400-168-8810
            <br />邮箱：sanliang@shinho.com <br />传真：400-168-8810
          </p>
        </div>
        <div class="address">
          <p>
            山东省烟台市开发区长江路77号
            <br />中信大厦4楼 <br />服务时间 9:00-17:00
          </p>
        </div>
        <div class="qrcode">
          <div>
            <el-image fit="cover" :src="qrcode" class="img"></el-image>
            <span>三两抖音号</span>
          </div>
          <div>
            <el-image fit="cover" :src="qrcode" class="img"></el-image>
            <span>微信公众号</span>
          </div>
        </div>
      </div>
      <div class="line02">
        <div class="copyright">
          <span>©COPYRIGHT 2019 保留所有权利 | 鲁ICP备16023926号</span>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import { upload } from "../api/api.js";
export default {
  name: "home",
  data() {
    return {
      loading_img: require("../assets/loading/loading动画-改边缘背景色.png"),
      timer: "",
      animatino_show: true,
      show: true,
      sub_show: false,
      nav_options: [
        { key: 1, url: "", content: "关于我们", methods: this.to_aboutus },
        { key: 2, url: "", content: "产品", methods: this.to_products },
        { key: 3, url: "", content: "品牌新闻", methods: this.to_news },
        { key: 4, url: "", content: "门店", methods: this.to_store },
        { key: 5, url: "", content: "加盟", methods: this.to_join }
      ],
      table_options: [
        {
          1: "日均营业额",
          2: "4,000元/天",
          3: "3,000元/天",
          4: "2,000元/天"
        },
        {
          1: "月销售毛利润",
          2: "50,000元/天",
          3: "37,800元/天",
          4: "25,200元/天"
          // 5: "（按42%毛利率计算）"
        },
        {
          1: "租金成本",
          2: "7,000元/天",
          3: "6,000元/天",
          4: "5,000元/天"
        },
        {
          1: "人工成本",
          2: "10,000元/天",
          3: "8,000元/天",
          4: "7,000元/天"
        },
        {
          1: "制作费用",
          2: "4,500元/天",
          3: "3,500元/天",
          4: "2,500元/天"
          // 5: "（水，电，煤）"
        },
        {
          1: "其他费用",
          2: "3,500元/天",
          3: "3,000元/天",
          4: "2,000元/天"
        },
        {
          1: "月费用合计",
          2: "25,000元/天",
          3: "20,500元/天",
          4: "16,500元/天"
        },
        {
          1: "月利润",
          2: "25,400元/天",
          3: "17,300元/天",
          4: "8,700元/天"
        },
        {
          1: "年利润",
          2: "304,800元/天",
          3: "207,600元/天",
          4: "104,400元/天"
        }
      ],
      investment_warning_options: [
        "能全身心的投入这个项目",
        "渴望成功 有较强的品牌意识及长远的发展眼光",
        "有创业的决心及承担投资风险的能力",
        "具备一定的投资资金及流动资金",
        "具有基本的经营管理和协调能力"
      ],
      date01: "2019-10-11",
      date02: "2019-10-29",
      date03: "2019-10-11",
      logo_url: require("../assets/home/image/正常.jpg"),
      logo_ceiling_url: require("../assets/home/image/吸顶.jpg"),
      logo_url_transparent: require("../assets/home/icon/Logo_透明.png"),
      customer_service_pic: require("../assets/home/image/组22.jpg"),
      qrcode: require("../assets/home/image/qrcode.jpg"),
      direction: "slide-right",
      upload_info: { name: "", phone: "", mailbox: "", message: "" },
      form: { name: "", tel: "", mail: "", content: "" },
      timer_scroll_bar: "",
      sendFlag: false
    };
  },
  components: {
    // HomePage,
    // AboutUs
  },
  created() {
    // 申请信息用formdata包装
    this.upload_info = new FormData();
    this.upload_info.append("name", "");
    this.upload_info.append("phone", "");
    this.upload_info.append("mailbox", "");
    this.upload_info.append("message", "");

    this.to_home();
    this.timer = setTimeout(() => {
      this.animatino_show = false;
    }, 5000);
    window.addEventListener("scroll", this.scroll_listener, true);
  },
  mounted() {
    this.initScroll();
    this.boforeunload();
    this.no_scroll_bar();
    document.body.style.overflowY = "hidden";
  },
  destroyed() {
    clearTimeout(this.timer);
    clearTimeout(this.timer_scroll_bar);
    window.removeEventListener("scroll", this.scroll_listener, true);
  },
  computed: {
    start_val: function() {
      return 0;
    },
    end_val01: function() {
      return 5;
    },
    end_val02: function() {
      return 2;
    },
    end_val03: function() {
      return 360;
    },
    end_val04: function() {
      return 2;
    },
    duration: function() {
      return 4000;
    }
  },
  methods: {
    // 首先在methods中定义beforeunload事件
    beforeunloadHandler() {
      this.initScroll();
    },
    // 然后监听这个事件注意这个事件是在mouted()中调用
    boforeunload() {
      window.addEventListener("beforeunload", this.beforeunloadHandler, false);
    },
    // 提交数据
    _upload() {
      // eslint-disable-next-line no-unused-vars
      upload(this.upload_info).then(res => {
        // eslint-disable-next-line no-console
        Number(res.data.status) === 200 && this.$message("提交成功");
      });
    },
    // mounted初始化scroll
    initScroll() {
      document.documentElement.scrollTop = 0;
    },
    // 动画载入后显示滚动条
    no_scroll_bar() {
      this.timer_scroll_bar = setTimeout(() => {
        document.body.style.overflowY = "auto";
      }, 5500);
    },
    // 滚动事件检测
    scroll_listener() {
      // eslint-disable-next-line no-console
      // console.log(document.body.style);
      let scrolled_distance = document.documentElement.scrollTop;
      if (scrolled_distance >= 40) {
        this.show = false;
        this.sub_show = true;
        // eslint-disable-next-line no-console
        // console.log(scrolled_distance);
      } else {
        this.show = true;
        this.sub_show = false;
      }
      if (
        scrolled_distance >= 440 &&
        this.$route.path != "/news" &&
        this.$route.path != "/store" &&
        this.$route.path != "/newsdetail" &&
        this.$route.path != "/"
      ) {
        this.sub_show = false;
      }
    },
    to_top() {
      let total = document.documentElement.scrollTop;

      // 计算每一小段的距离
      let step = total / 100;
      function smoothDown() {
        total -= step;
        document.documentElement.scrollTop = total;
        if (total <= step) {
          window.clearInterval(timeout);
          // eslint-disable-next-line no-console
          // console.log("done");
        }
      }
      let timeout = window.setInterval(smoothDown, 1);
    },
    to_home() {
      this.$router.push({
        name: "homepage"
      });
    },
    to_aboutus() {
      this.$router.push({
        name: "aboutus"
      });
    },
    to_products() {
      this.$router.push({
        name: "products"
      });
    },
    to_join() {
      this.$router.push({
        name: "join"
      });
    },
    to_news() {
      this.$router.push({
        name: "news"
      });
    },
    to_store() {
      this.$router.push({
        name: "store"
      });
    }
  },
  watch: {
    // 表单的数据输入
    form: {
      handler(newVal) {
        if (
          newVal.name != "" ||
          newVal.tel != "" ||
          newVal.mail != "" ||
          newVal.content != ""
        ) {
          this.sendFlag = true;
          this.upload_info.set("name", newVal.name);
          this.upload_info.set("phone", newVal.tel);
          this.upload_info.set("mailbox", newVal.mail);
          this.upload_info.set("message", newVal.content);
        } else {
          this.sendFlag = false;
        }
      },
      deep: true
    },
    // 页面组件载入动画效果
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      if (to.path == "/") {
        this.direction = "slide-right";
      } else if (from.path == "/") {
        this.direction = "slide-left";
      } else {
        this.direction = toDepth < fromDepth ? "slide-right" : "slide-left";
      }
    }
  },
  destroy() {
    window.removeEventListener("beforeunload", this.beforeunloadHandler, false);
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  // height: fit-content;

  // 载入动画
  .loading_animation {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    z-index: 1999;

    .container_inner {
      position: absolute;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 5px solid rgb(#f1f1f1);
      // background:#76daff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 9px 9px 9px 9px #c1c1c1;

      animation: effect 1s 4.3s;

      @keyframes effect {
        from {
          box-shadow: 0 0 0 0 hsl(#e83929, 100%, 41%);
        }
      }
      .icon-baozi {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 100px;
        color: #e53832;
      }
      .wave {
        position: absolute;
        width: 70px;
        height: 70px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        &::after {
          content: "";
          z-index: -1;
          position: absolute;
          width: 400px;
          height: 400px;
          top: -9%;
          left: 50%;
          background-color: rgba(#e53832, 0.9);
          border-radius: 40%;
          transform: translate(-50%, 30%) rotate(0);
          animation: rotate 6s ease-out forwards;
        }
      }

      @keyframes rotate {
        20% {
          border-radius: 30%;
        }
        40% {
          border-radius: 45%;
        }
        60% {
          border-radius: 30%;
        }
        80% {
          border-radius: 45%;
        }
        100% {
          transform: translate(-50%, 2%) rotate(360deg);
        }
      }
    }
  }

  .nav {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
    width: 100%;
    background: #fff;
    padding: 19px 0 18px 0;
    z-index: 999;
    transition: all 1s;

    &.ceiling_transition-enter,
    &.ceiling_transition-leave-to {
      transform: translate(-50%, -100%);
      transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
    }

    .inner {
      position: relative;
      max-width: 1198px;
      height: 85px;
      display: flex;
      margin: 0 auto;

      img {
        cursor: pointer;
        width: 160px;
        height: 85px;
        background: #000;
      }
      .a_to_home {
        position: absolute;
        z-index: 999;
        width: 160px;
        height: 85px;
        left: 0;
        background: transparent;
      }

      .a_button {
        height: 85px;
        line-height: 85px;
        margin-left: 77px;

        a {
          position: relative;
          display: inline-block;
          cursor: pointer;
          margin-right: 47px;
          font-size: 18px;
          font-weight: 500;
          color: #525252;
          text-decoration: none;
          transition: all 0.2s;
          z-index: 0;

          &:hover {
            color: #e83929;
            transform: scale(1.4);
            background: transparent;

            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 18px;
              top: 50%;
              transform: translateY(-50%);
              background: #f8f8f8;
              z-index: -1;
              box-shadow: 0 0 10px 5px hsl(#f8f8f8, 100%, 41%);
              border-radius: 10%;
            }
          }
        }
      }

      .hot_line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 207px;
        height: 85px;
        margin-left: 192px;
        .p1 {
          cursor: default;
          color: #e83929;
          font-size: 23px;
          font-weight: 500;
          margin: 0;
          cursor: default;
        }
        .p2 {
          cursor: default;
          color: #e83929;
          font-size: 28px;
          font-weight: bold;
          margin: 0;
          cursor: default;
        }
      }
    }
  }
  .nav_ceiling {
    position: fixed;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%, 0);
    padding: 11px 0 11px 0;
    z-index: 999;
    background: #fff;
    box-shadow: 0px 2px 10px 2px #222222;
    transition: all 1s;

    &.ceiling_transition-enter,
    &.ceiling_transition-leave-to {
      transform: translate(-50%, -100%);
      transition-timing-function: cubic-bezier(0, 0.57, 0.44, 1.97);
    }

    .inner {
      position: relative;
      max-width: 1198px;
      height: 48px;
      display: flex;
      margin: auto;

      img {
        cursor: pointer;
        width: 91px;
        height: 48px;
        background: #000;
      }
      .a_to_home {
        position: absolute;
        z-index: 999;
        width: 160px;
        height: 48px;
        left: 0;
        background: transparent;
      }

      .a_button {
        height: 48px;
        line-height: 48px;
        margin-left: 77px;

        a {
          position: relative;
          display: inline-block;
          cursor: pointer;
          margin-right: 47px;
          font-size: 18px;
          font-weight: 500;
          color: #525252;
          text-decoration: none;
          transition: all 0.2s;
          z-index: 0;

          &:hover {
            color: #e83929;
            transform: scale(1.4);
            background: transparent;

            &::before {
              content: "";
              position: absolute;
              width: 100%;
              height: 18px;
              top: 50%;
              transform: translateY(-50%);
              background: #f8f8f8;
              z-index: -1;
              box-shadow: 0 0 10px 5px hsl(#f8f8f8, 100%, 41%);
              border-radius: 10%;
            }
          }
        }
      }

      .hot_line {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 207px;
        height: 48px;
        margin-left: 192px;
        .p1 {
          cursor: default;
          color: #e83929;
          font-size: 19px;
          font-weight: 500;
          margin: 0;
          cursor: default;
        }
        .p2 {
          cursor: default;
          color: #e83929;
          font-size: 19px;
          font-weight: bold;
          margin: 0;
          cursor: default;
        }
      }
    }
  }

  .appView {
    margin-top: 119px; // 119 && 70
    width: 100%;
    transition: all 0.2s ease-in-out;
  }
  .slide-left-enter {
    // transform: translate(100%, 0);
    opacity: 1;
  }
  .slide-left-leave-active {
    // transform: translate(-50%, 0);
    opacity: 0;
  }
  .slide-right-enter {
    // transform: translate(-50%, 0);
    opacity: 1;
  }
  .slide-right-leave-active {
    // transform: translate(100%, 0);
    opacity: 0;
  }

  .contact_us {
    max-width: 1198px;
    margin: auto;
    margin-top: 68px;
    .p1 {
      cursor: default;
      margin: 0;
      width: 100%;
      // height: 17px;
      font-size: 36px;
      font-weight: bold;
      color: #333333;
      text-align: center;
    }

    .p2 {
      cursor: default;
      width: 100%;
      // height: 8px;
      line-height: 14px;
      font-size: 16px;
      font-weight: 400;
      margin-top: 22px;
      margin-bottom: 0;
      text-align: center;
    }

    .contact_info {
      position: relative;
      margin-top: 34px;
      display: flex;
      justify-content: space-between;

      .back_to_top {
        cursor: pointer;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 48px;
        height: 48px;
        background: #e83929;
        border-radius: 50%;
        box-shadow: 0 0 0 10px transparent;
        animation: effect 1s infinite;

        @keyframes effect {
          from {
            box-shadow: 0 0 0 0 hsl(#e83929, 100%, 41%);
          }
        }

        &::before {
          content: "";
          position: absolute;
          right: 13px;
          bottom: 8px;
          width: 20px;
          height: 20px;
          border-left: 1px solid #fff;
          border-bottom: 1px solid #fff;
          transform: rotate(135deg);
          animation: shake 1s infinite;

          @keyframes shake {
            30% {
              bottom: 12px;
              transform: rotate(135deg);
            }
            // 60% {
            //   bottom: 10px;
            //   transform: rotate(135deg);
            // }
            100% {
              bottom: 8px;
              transform: rotate(135deg);
            }
          }
        }
      }

      p {
        cursor: default;
        margin: 0;
      }

      img {
        width: 418px;
        height: 418px;
        background: #000;
      }

      .info {
        font-size: 16px;
        font-weight: 300;

        .info_p1 {
          margin-top: 25px;
          font-size: 18px;
          font-weight: 500;
        }
        .info_p2 {
          margin-top: 11px;
          font-size: 18px;
          font-weight: 500;
        }
        .info01 {
          margin-top: 53px;
          display: flex;
          justify-content: space-between;

          div {
            padding: 0 0 17px 0;
            border-bottom: 1px solid #5b5b5b;

            span {
              cursor: default;
            }

            input {
              border: 0px solid #5b5b5b;
              padding: 0;
              outline: none;
              font-size: 16px;
              font-weight: 500;
              width: 210px;
            }
          }
        }

        .info02 {
          margin-top: 41px;

          div {
            padding: 0 0 17px 0;
            border-bottom: 1px solid #5b5b5b;
            display: flex;

            span {
              cursor: default;
              display: inline-block;
              width: 55px;
            }

            input {
              border: 0px solid #5b5b5b;
              padding: 0;
              outline: none;
              font-size: 16px;
              font-weight: 500;
              width: -webkit-fill-available;
            }
          }
        }

        .upload {
          cursor: pointer;
          margin-top: 47px;
          width: 100%;
          height: 55px;
          line-height: 55px;
          text-align: center;
          background: #d83b2a;
          font-size: 16px;
          font-weight: 300;
          color: #ffffff;
        }

        .statement {
          margin-top: 36px;
          font-size: 16px;
          font-weight: 300;
          padding: 0 0 0 3px;
        }
      }
    }
  }
  .footer {
    margin-top: 65px;
    background: #e83929;
    padding: 30px 0 0 0;

    .line01 {
      max-width: 1198px;
      padding: 0 0 39px 0;
      margin: auto;
      display: flex;

      .logo {
        width: 157px;
        height: 83px;
        background: #e83929;
      }
      .contact {
        margin-left: 91px;
        border-left: 1px solid #ffffff;
        height: 70px;
        padding: 0 0 0 39px;

        p {
          cursor: default;
          margin: 0;
          width: 190px;
          height: 70px;
          font-size: 14px;
          font-weight: 400;
          line-height: 23px;
          color: #fff;
        }
      }
      .address {
        margin-left: 75px;
        border-left: 1px solid #ffffff;
        height: 70px;
        padding: 0 0 0 39px;

        p {
          cursor: default;
          margin: 0;
          height: 70px;
          width: 199px;
          font-size: 14px;
          font-weight: 400;
          line-height: 23px;
          color: #fff;
        }
      }
      .qrcode {
        display: flex;
        margin-left: 151px;
        div {
          // margin-right: 44px;
          margin-left: 44px;
          display: flex;
          flex-direction: column;
          .img {
            width: 105px;
            height: 105px;
            background: blue;
          }
          span {
            cursor: default;
            margin-top: 8px;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
            font-weight: 400;
          }

          &:first-child {
            margin-left: 0;
          }
        }
      }
    }

    .line02 {
      background: #e50000;
      width: 100%;
      height: 52px;
      line-height: 52px;

      .copyright {
        span {
          cursor: default;
          margin: auto;
          max-width: 1198px;
          font-size: 14px;
          font-weight: 400;
          display: block;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
